import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { getUser } from "../../http/api";
import styles from "../Cart/cart.module.scss";
import Public_foot from "../Public/public_foot"
import store from "../../redux/store";
import c from "../../images/c.jpg";
import t from "../../images/t.jpg";
class cart extends Component {
    // 状态
    state = {
        data:[],//购物车数据
        user_id: "", 
        product: true, //判断订单是否有商品
        token: "",
    };
    handleT = (params) => {
        this.props.history.goBack(-1);
    };
    handleD = (params) => {
        this.props.history.go("home");
    };
    handleCartIndent = (params) => {
        this.setState({
            product:false
        })
    };
    handleCartIndentIndentImg = (params) => {
        this.props.history.push("about")
    }
    componentDidMount() {
        let token = localStorage.getItem("token");

        this.setState(
            {
                token: token,
            },
            () => {
                console.log(this.state.token);
            }
        );

        console.log(this.state.token);
    }
    // 跳转到登录页
    handleGoToL = () => {
        this.props.history.push("/");

    };

    render() {
        return (
            <div className={styles.cart}>

                {
                (!this.state.token) ? (
                    <div>
                        <div className={styles.cartCommon}>
                            <div className={styles.cartGoUp} onClick={this.handleT}>{"<"}</div>
                            <div className={styles.cartHeadertitle}>订单</div>
                            <div className={styles.cartDe} onClick={this.handleD}>X</div>
                        </div>
                        {/* // 未登录状态开始 */}
                        <div className={styles.cartMid}>
                            <div className={styles.cartMidImg}>
                                <img src={c} alt="" />
                            </div>
                            <div className={styles.cartMidTitle}>
                                你还没有登录，请登录后查看信息
                         </div>
                            <div className={styles.cartMidBtn} onClick={this.handleGoToL}>
                                登录/注册{this.state.user_id}
                            </div>
                        </div>
                    </div>
                ) : //未登录状态结束
                    (this.state.product) ? (
                        <div>
                            <div className={styles.cartCommon}>
                                <div className={styles.cartGoUp} onClick={this.handleT}>{"<"}</div>
                                <div className={styles.cartHeadertitle} onClick={this.handleCartIndent}>订单</div>
                                <div className={styles.cartDe} onClick={this.handleD}>X</div>
                            </div>
                            {/* // 订单为空开始 */}
                            <div className={styles.cartNull}>
                                <div className={styles.cartImg}>
                                    <img src={t} alt="" />
                                </div>
                                <div className={styles.cartTitle}>订单还是空的,去逛逛</div>
                            </div>
                        </div>
                    ) : (
                        <div>
                            {/* 订单有商品 */}
                            <div className={styles.cartCommon}>
                                <div className={styles.cartGoUp} onClick={this.handleT}>{"<"}</div>
                                <div className={styles.cartHeadertitle} onClick={this.handleCartIndent}>订单</div>
                                <div className={styles.cartDe} onClick={this.handleCartIndentIndentImg}>
                                    <img src={t} alt=""/>
                                </div>
                            </div>
                            <div className={styles.cartIndentMid}>
                                    <div className={styles.cartIndentTitle}>商品太多无法显示!!!</div>
                                </div>     
                        </div>
                    )}
                <Public_foot></Public_foot>
            </div>
        );
    }
}

export default withRouter(cart);
